<template>
	<div ref="chartRef" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import { PropType } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { deviceStateMonth } from '/@/api/analysis/index';
import type { Ref } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
defineProps({
	width: {
		type: String as PropType<string>,
		default: '100%',
	},
	height: {
		type: String as PropType<string>,
		default: '100%',
	},
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
	getDeviceStateMonth();
});
// 获取每月设备状态
const getDeviceStateMonth = () => {
	deviceStateMonth().then((res) => {
		let yAxis_alarm = [],
			yAxis_fault = [],
			yAxis_normal = [],
			xAxis = [];
		for (let i = 0; i < res.data?.length; i++) {
			const item = res.data[i];
			yAxis_alarm.push(item.alarm);
			yAxis_fault.push(item.fault);
			yAxis_normal.push(item.normal);
			xAxis.push(`${item.year}-${item.month}`);
		}
		setOptions({
			title: {
				text: t('analysis.MonthlyDeviceState'),
				textStyle: { color: '#3ecafc', fontWeight: 'normal' },
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					lineStyle: {
						width: 1,
						color: '#019680',
					},
				},
			},
			legend: {
				show: true,
				align: 'left',
				right: 20,
				icon: 'circle',
				top: 10,
				padding: 0,
				itemWidth: 10,
				textStyle: {
					color: '#fff',
					fontSize: 10,
				},
			},
			grid: { left: 20, top: 50, bottom: 10, right: 20, containLabel: true },
			xAxis: {
				type: 'category',
				data: xAxis,
				axisTick: {
					show: false,
				},
				axisLabel: {
					fontSize: 10,
					color: '#6E7079',
				},
				axisLine: {
					lineStyle: {
						color: '#3ecafc',
					},
				},
			},
			yAxis: {
				type: 'value',
				minInterval: 1,
				splitLine: {
					show: true,
					lineStyle: {
						width: 1,
						type: 'solid',
						color: '#3ecafc',
					},
				},
			},
			series: [
				{
					name: t('analysis.normal'),
					data: yAxis_normal,
					type: 'bar',
					itemStyle: {
						color: '#0BD58B',
					},
				},
				{
					name: t('analysis.fault'),
					data: yAxis_fault,
					type: 'bar',
					itemStyle: {
						color: '#FF9E2C',
					},
				},
				{
					name: t('analysis.alarm'),
					data: yAxis_alarm,
					type: 'bar',
					itemStyle: {
						color: '#E83C03',
					},
				},
			],
		});
	});
};
</script>

<style lang="scss" scoped></style>
